<template>
  <div class="closeBarMain">
    <div ref="tabHeight" class="ml20 clear_fixed">
      <head-tab-switch class="fl" navTitle="影像列表" secondTitle="/ 匹配" />
      <div class="pl30 clear_fixed boxs fl">
        <div class="f18 clr_ef8900 fl" style="display:inline-block;height:58px;line-height:58px" v-show="!singleMatch || didSearchQuery">
          匹配失败总检查数：{{ leftTableData.length }}
        </div>
        <div class="fl mt10 ml20" style="width:450px; display:inline-block;">
          <el-form :inline="true" class="demo-form-inline clear_fixed">
            <div class="text_nowrap position_relative">
              <el-form-item label="检查时间：" label-width="100px">
                <div style="width: 290px">
                  <el-date-picker v-model="checkTimeStart" size="small" type="date" placeholder="开始时间" style="width: 140px" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                  <span class="ml5 mr5">至</span>
                  <el-date-picker v-model="checkTimeEnd" size="small" type="date" placeholder="结束时间" style="width: 140px" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
                  <!-- <el-date-picker style="width: 100%;" v-model="checkTime" type="daterange" align="right" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                    size="small" value-format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker> -->
                </div>
              </el-form-item>
              <el-form-item class="searchBtn right0 ml20">
                <el-button type="primary" size="small" @click="leftQueryFn">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>

      </div>

      <div class="mt13 mr15 fr h45 backButton">
        <el-button plain type="primary" size="small" @click="toImgList">返回</el-button>
      </div>
    </div>

    <div class="main_content">
      <el-table :data="leftTableData" border :header-cell-style="{ background: '#F5F5F5', color: '#333' }"
        highlight-current-row :height="215" @current-change="leftHandleCurrentChange" ref="leftTable"
        header-row-class-name="strong">
        <el-table-column label="序列" fixed="left" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <common-table :propData="leftPropData"></common-table>
      </el-table>
      <div class="img_floor">
        <div class="floor_left">
          <div class="left_top">
            <div class="patient_info bradius5">
              <div class="f18 mt5">
                <span class="mr30">{{ leftCurrentRow && leftCurrentRow.patient_name }}</span>
                <span class="mr30">{{ leftCurrentRow && leftCurrentRow.modalities_in_study }}</span>
              </div>
              <div class="f14 mt5">
                <span v-if="leftTableData.length !== 0">检查编号：{{ leftCurrentRow && leftCurrentRow.accession_number
                }}</span>
              </div>
              <div class="f14 mt5 overthreeline" v-if="leftTableData.length !== 0"
                :title="leftCurrentRow && leftCurrentRow.study_description">检查描述：{{ leftCurrentRow &&
                  leftCurrentRow.study_description }}</div>
              <div class="f14 mt5" v-if="leftTableData.length !== 0"><span>检查时间：{{ leftCurrentRow &&
                leftCurrentRow.study_date_time }}</span></div>
            </div>
          </div>
          <div class="left_bottom boxs">
            <div class="count_boxs bradius5">
              <div class="count_box">
                <p class="f18 mb5">序列数</p>
                <i class="f28">{{ series_count }}</i>
              </div>
              <div class="count_box">
                <p class="f18 mb5">实例数</p>
                <i class="f28">{{ images_count }}</i>
              </div>
            </div>
          </div>
        </div>
        <div class="floor_right">
          <div class="img_info mt10">
            <div class="img_box">
              <div v-for="(item, index) in seriesData" :key="index" class="w196 f14 cursor">
                <el-image v-if="item.imgSrc" class="w196 h180" :src="item.imgSrc" :preview-src-list="[item.imgSrc]">
                  <div slot="error" class="image-slot w100 h100 position_relative">
                    <i v-if="item.id" class="imgLoadFail position_absolute toCenter"></i>
                    <i v-else class="noImg position_absolute toCenter"></i>
                  </div>
                </el-image>
                <el-image v-else class="w196 h180" src="noImg">
                  <div slot="error" class="image-slot w100 h100 position_relative">
                    <i class="noImg position_absolute toCenter"></i>
                  </div>
                </el-image>
                <p class="mt5 mb5">序列编号：{{ item.series_number }}</p>
                <div style="height: 40px;margin-bottom: 30px">序列描述：{{ item.series_description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="position_relative">
        <div class="search_bar mt5">
          <el-form :inline="true" class="demo-form-inline clear_fixed searchUnMatch">
            <div class="text_nowrap position_relative">
              <el-form-item label="患者姓名：" label-width="88px">
                <!-- 患者姓名 -->
                <el-input size="medium" placeholder="请输入患者姓名" style="width:147px;" v-model="queryData.patient_name"
                  clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="患者编号：" label-width="88px">
                <!-- 患者编号 -->
                <el-input size="medium" placeholder="请输入患者编号" style="width:140px;" v-model="queryData.patient_id"
                  clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="检查编号：" label-width="88px">
                <!-- 检查编号 -->
                <el-input size="medium" placeholder="请输入检查编号" style="width:140px;" v-model="queryData.accession_number"
                  clearable>
                </el-input>
              </el-form-item>
              <el-form-item label="检查类型：" label-width="88px">
                <!-- <el-input
                  size="medium"
                  placeholder="请输入检查类型"
                  style="width:160px;"
                  v-model="queryData.modalities_in_study"
                  clearable>
                </el-input> -->
                <!-- 检查类型 -->
                <el-autocomplete size="medium" placeholder="请输入" style="width:80px;" class="inline-input"
                  v-model="queryData.modalities_in_study" :fetch-suggestions="querySearch"></el-autocomplete>
              </el-form-item>
              <br>
              <el-form-item v-if="!showTime1" style="width: 462px" label="登记时间：" label-width="88px">
               
                <div style="width: 380px">
                  <el-date-picker v-model="queryData.start_time" size="small" type="date" placeholder="开始时间" style="width: 175px" value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <span class="ml5 mr5">至</span>
                  <el-date-picker v-model="queryData.end_time" size="small" type="date" placeholder="结束时间" style="width: 175px" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item v-else style="width: 462px">
                <el-select v-model="queryData.time_type" size="medium" class="fl selectedTime" style="width:105px">
                  <el-option  value="7" label="预检时间"></el-option>
                  <el-option value="2" label="登记时间"></el-option>
                </el-select>
                <div style="width: 330px">
                  <el-date-picker v-model="queryData.start_time" size="small" type="date" placeholder="开始时间" style="width: 160px" value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <span class="ml5 mr5">至</span>
                  <el-date-picker v-model="queryData.end_time" size="small" type="date" placeholder="结束时间" style="width: 160px" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item label="检查状态：" label-width="88px">
                <el-select v-model="queryData.un_match_study" size="medium" class="fl" style="width:140px">
                  <el-option value="0" label="所有检查"></el-option>
                  <el-option value="1" label="未匹配检查"></el-option>
                </el-select>

              </el-form-item>

              <el-form-item class="searchBtn inline mr10 fr">
                <el-button type="primary" size="small" @click="queryFn()">查询</el-button>
                <!-- <el-button type="primary" size="small" @click="queryFn(1)">查询未匹配患者</el-button> -->
                <el-button type="primary" plain size="small" @click="resetFn">重置</el-button>
                <el-button type="warning" size="small" @click="imgMatch">匹配</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="w100 mt5">
          <el-table :data="rightTableData" border :header-cell-style="{ background: '#F5F5F5', color: '#333' }"
            highlight-current-row :height="215" ref="rightTable" @current-change="rightHandleCurrentChange"
            :empty-text="emptyText" header-row-class-name="strong">
            <el-table-column label="序列" fixed="left" width="50">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <common-table :propData="rightPropData"></common-table>
          </el-table>
        </div>
      </div>
    </div>

    <MatchImageVue :matchImageShow="matchImageShow" :matchImageData="rightCurrentRow" :oldImageData="leftCurrentRow"
      :oldSeriesData="seriesData"  @MatchClose="MatchClose" @MatchSubmit="imgMatchFn" />
  </div>
</template>

<script>
import HeadTabSwitch from '@/components/common/HeadTabSwitch' // 头部tab
import CommonTable from '@/components/common/CommonTable'
import MatchImageVue from '@/components/pacs/commonDialog/ImgMatching'
import moment from 'moment' // 表格
import { mapGetters } from 'vuex'
import store from '@/store/index'
import { thistle } from 'color-name'

export default {
  name: 'Matching',
  data() {
    return {
      setObj:{},
      showTime1:true,//是否展示预检时间
      singleMatch:false,
      didSearchQuery:false,
      isShouldRefresh:false,
      basePath: '',
      baseUrl: 'http://www.eworlds.com.cn',
      // tableHeight: 0,
      leftTableHeight: 100,
      restaurants: [
        { value: "CT", label: "CT" },
        { value: "CR", label: "CR" },
        { value: "MR", label: "MR" },
        { value: "NM", label: "NM" },
        { value: "PT", label: "PT" },
        { value: "DX", label: "DX" },
        { value: "DR", label: "DR" },
        { value: "ES", label: "ES" },
        { value: "MG", label: "MG" },
        { value: "RF", label: "RF" },
        { value: "SC", label: "SC" },
        { value: "US", label: "US" },
        { value: "XA", label: "XA" },
        { value: "OT", label: "OT" }
      ], // 检查类型
      leftPropData: [
        // {
        //   prop: 'id',
        //   label: '检查主键'
        // },
        // {
        //   prop: 'institutionCode',
        //   label: '医疗机构',
        //   width: 120
        // },
        {
          prop: 'other_patient_name',
          label: '患者姓名',
          formatter: function (row) {
            let name = '';
            name = row.other_patient_name ? row.other_patient_name : row.patient_name;
            return name;
          }
        },
        {
          prop: 'patient_sex',
          label: '性别',
          formatter: function (row) {
            const sexMapping = {
              M: '男',
              F: '女',
              O: '未知'
            }
            return sexMapping[row.patient_sex]
          }
        },
        {
          prop: 'patient_age',
          label: '年龄',
          formatter: function (row) {
            const patient_ageTypeMapping = {
              'Y': '岁',
              'M': '月',
              'D': '日',
              'W': '周'
            }
            let patient_ageNum = ''
            let patient_ageType = ''
            if (row.patient_age) {
              patient_ageNum = row.patient_age.substring(0, row.patient_age.length - 1)
              patient_ageType = row.patient_age.substring(row.patient_age.length - 1, row.patient_age.length)
              return patient_ageNum + patient_ageTypeMapping[patient_ageType]
            } else {
              return ''
            }
          }
        },
        {
          prop: 'patient_birth_date',
          label: '出生日期',
          width: 100,
          formatter: function (row) {
            if (row.patient_birth_date) {
              return moment(row.patient_birth_date).format('YYYY-MM-DD')
            } else {
              return ''
            }
          }
        },
        {
          prop: 'modalities_in_study',
          label: '检查类型',
          width: 90,
        },
        {
          prop: 'accession_number',
          label: '检查编号',
          width: 120
        },
        {
          prop: 'study_date_time',
          label: '检查时间',
          width: 180,
          formatter: function (row) {
            if (row.study_date_time) {
              return moment(row.study_date_time).format('YYYY-MM-DD HH:mm:ss')
            } else {
              return ''
            }
          }
        },
        {
          prop: 'study_description',
          label: '检查描述',
          width: 180
        },
        {
          prop: 'source_aet',
          label: '来源设备'
        },
        {
          prop: 'storage_state',
          label: '访问状态',
          formatter: function (row) {
            if (row.storage_state === 0) {
              return '在线'
            } else if (row.storage_state === 10) {
              return '近线'
            } else if (row.storage_state === 20) {
              return '远线'
            } else if (row.storage_state === -1) {
              return '离线'
            } else {
              return ''
            }
          }
        },
        {
          prop: 'volume_label',
          label: '备份标卷',
          width: 120
        }
      ],
      leftTableData: [],
      rightPropData: [
        {
          prop: 'patient_id',
          label: '患者编号',
          width: 100
        },
        {
          prop: 'patient_name',
          label: '患者姓名',
          width: 100
        },
        // {
        //   prop: 'other_patient_name',
        //   label: '患者中文姓名'
        // },
        {
          prop: 'patient_sex',
          label: '性别',
          width: 54
          // formatter: function (row) {
          //   const sexMapping = {
          //     M: '男',
          //     F: '女',
          //     O: '未知'
          //   }
          //   return sexMapping[row.patient_sex]
          // }
        },
        {
          prop: 'patient_age',
          label: '年龄',
          width: 70,
          formatter: function (row) {
            const patient_ageTypeMapping = {
              'Y': '岁',
              'M': '月',
              'D': '日',
              'W': '周'
            }
            let patient_ageNum = ''
            let patient_ageType = ''
            if (row.patient_age) {
              patient_ageNum = row.patient_age.substring(0, row.patient_age.length - 1)
              patient_ageType = row.patient_age.substring(row.patient_age.length - 1, row.patient_age.length)
              return patient_ageNum + patient_ageTypeMapping[patient_ageType]
            } else {
              return ''
            }
          }
        },
        {
          prop: 'patient_birth_date',
          label: '出生日期',
          width: 170
        },
        {
          prop: 'modalities_in_study',
          label: '检查类型',
          width: 90
        },
        {
          prop: 'accession_number',
          label: '检查编号',
          width: 100
        },
        {
          prop: 'patient_class',
          label: '患者类别',
          width: 100
        },
        {
          prop: 'work_state_desc',
          label: '检查状态',
          width: 100
        },
        {
          prop: 'examination_item_name',
          label: '检查项目',
          width: 150
        },
        {
          prop: 'scheduled_date_time',
          label: '预检时间',
          width: 170
        },
        {
          prop: 'reg_time',
          label: '登记时间',
          width: 170
        },
        {
          prop: 'observation_room_name',
          label: '检查机房',
          width: 150
        },
        {
          prop: 'med_rec_no',
          label: '病历号',
          width: 100
        },
        {
          prop: 'out_patient_no',
          label: '门诊号',
          width: 100
        },
        {
          prop: 'in_patient_no',
          label: '住院号',
          width: 100
        },
      ],
      rightTableData: [],
      leftCurrentRow: {patient_id:''}, // 表格当前点击的行
      rightCurrentRow: {patient_id:''},
      series_count: 0, // 序列数
      images_count: 0, // 实例数
      seriesData: [],
      queryData: {
        patient_name: '',
        patient_id: '',
        accession_number: '',
        modalities_in_study: '',
        return_number: 20,
        un_match_study: '1',
        time_type:"7",
        start_time:'',
        end_time:'',
      },
      checkTimeStart: '',
      checkTimeEnd: '',
      timeKeyValue:'preTime',
      institution_id: '',
      pickerOptions: {
        disabledDate: (time) => {
          return this.dealDisabledDate(time)
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date()
              // const start = new Date()
              // start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
              picker.$emit('pick', [end, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      // resizeTimer: null
      emptyText: '暂无数据',
      matchImageShow: false,
      currentMatchState:0,
    }
  },
  computed: {
    ...mapGetters(['group'])
  },
  watch: {
    $route: {
      handler: function (newVal) {
        // console.log(newVal)
        if (newVal.query['checktime'] && newVal.query['checktime'] === 'today') {
          let datetime = new Date();
          let year = datetime.getFullYear();
          let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
          let day = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
          let today = `${year}-${month}-${day} 00:00:00`
          this.checkTimeStart = today
          this.checkTimeEnd = today
        } else {
          this.checkTimeStart = ''
          this.checkTimeEnd = ''
        }
      },
      deep: true,
      immediate: true
    },
    // leftTableHeight(newVal) {
    //   if(!this.resizeTimer) {
    //     this.leftTableHeight = newVal
    //     this.resizeTimer = true
    //     let that = this
    //     setTimeout(() => {
    //       console.log(that.leftTableHeight)
    //       // that.init()
    //       that.resizeTimer = false
    //     }, 400)
    //   }
    // }
  },

  methods: {
    // 检查类型集合
    querySearch(queryString, cb) {
      const restaurants = this.restaurants;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    dealDisabledDate(time) { // 禁止选择的时间段
      var times = Date.now() // 禁止选择今天之后的时间
      return time.getTime() > times
    },
    async getIMGList() { // 获取列表
      let start_study_date_time = ''
      let end_study_date_time = ''
      if (this.checkTimeStart) {
        start_study_date_time = this.checkTimeStart
      }
      if(this.checkTimeEnd){
        end_study_date_time = this.checkTimeEnd
      }
      let accession_number = ''
      if (this.$route.query.accession_number) {
        accession_number = this.$route.query.accession_number
      }
      let data = {};
      // if (this.$route.query.id) {
      //   data.id = this.$route.query.id;
      // } else {
      data = Object.assign({ match_state: -1, start_study_date_time, end_study_date_time, accession_number }, { page_index: 1, page_size: 100 },)
      if (this.institution_id) {
        data.institution_id = this.institution_id
      }
     
      this.$pacsApi.pacsApi.getIMGList(data).then(res => {
        const { code, data } = res
        if (code === 0) {
          this.leftTableData = data;
          this.$nextTick(() => {
            if (data.length > 0) {
              this.$refs.leftTable.setCurrentRow(this.$refs.leftTable.data[0])
            }
          })
        }
      })


    },
    leftQueryFn() {
      this.didSearchQuery = true
      this.getIMGList()
    },
    toImgList() {
      // if(this.group === 'doct' && this.$route.query.systemid && this.$route.query.scope) { // 医生角色
      //   this.$router.push({path: this.basePath + '/IMGLIST', query: {scope: this.$route.query.scope, systemid: this.$route.query.systemid}})
      // }else if(this.group === 'dept' && this.$route.query.systemid) { // 科室角色
      //   this.$router.push({path: this.basePath + '/IMGLIST', query: {systemid: this.$route.query.systemid}})
      // }else {
      //   this.$router.push({ path: this.basePath + '/IMGLIST' })
      // }
      if(this.isShouldRefresh){
        this.$router.push({ path: this.basePath + '/IMGLIST', query: { group: this.group, systemid: this.$route.query.systemid,match_state:'1'} })
      }else
      {
        this.$router.push({ path: this.basePath + '/IMGLIST', query: { group: this.group, systemid: this.$route.query.systemid} })
      }
    },
    async getSeriesInfo(id) {
      let res = await this.$pacsApi.pacsApi.getSeriesInfo(id)
      // //打包时记得恢复
      //       let res = {
      //   "data": [
      //     {
      //       "id": "1638002996539297796",
      //       "modality": "REQUEST",
      //       "series_number": "1",
      //       "series_instance_uid": "1.2.840.113619.2.55.3.2831164355.739.1387471864.581",
      //       "series_date_time": "2013-12-20 15:24:45",
      //       "series_description": "Scout",
      //       "images_count": 3,
      //       "storage_state": 0
      //     },
      //     {
      //       "id": "1638002991837483014",
      //       "modality": "CT",
      //       "series_number": "2",
      //       "series_instance_uid": "1.2.840.113619.2.55.3.2831164355.739.1387471864.583",
      //       "series_date_time": "2013-12-20 15:24:45",
      //       "series_description": null,
      //       "images_count": 63,
      //       "storage_state": 0
      //     },
      //     {
      //       "id": "1638002993859137537",
      //       "modality": "CT",
      //       "series_number": "3",
      //       "series_instance_uid": "1.2.840.113619.2.55.3.2831164355.739.1387471864.583.3",
      //       "series_date_time": "2013-12-20 15:24:45",
      //       "series_description": "Recon 2:",
      //       "images_count": 249,
      //       "storage_state": 0
      //     }
      //   ],
      //   "code": 0,
      //   "msg": "ok"
      // }
      let { code, data } = res
      if (code === 0) {
        if (data.length === 0) {
          this.series_count = 0
          this.images_count = 0
          this.seriesData = []
        } else {
          this.series_count = data.length
          this.images_count = data.reduce((totalVal, currentVal) => {
            return totalVal + currentVal.images_count
          }, 0)
          let readerPromise = (fileRes) => {
            return new Promise((resolve, reject) => {
              let reader = new FileReader()
              reader.readAsDataURL(fileRes)
              reader.onload = () => {
                // console.log(reader.result)
                resolve(reader.result)
              }
            })
          }
          let forFn = async () => {
            for (let i = 0; i < data.length; i++) {
              let fileRes = await this.$pacsApi.pacsApi.getSeriesImg(data[i]['id'])
              let readerResult = await readerPromise(fileRes)
              // console.log(readerResult)
              this.$set(data[i], 'imgSrc', readerResult)
            }
          }
          forFn()
          // data.forEach(async (ele, index) => {
          //   let fileRes = await this.$pacsApi.pacsApi.getSeriesImg(ele.id)
          //   let blobData = new Blob([fileRes])
          //   let imgUrl = URL.createObjectURL(blobData)
          //   this.$set(data[index], 'imgSrc', imgUrl)
          // })
          this.seriesData = data
        }
      }
    },
    // 表格操作
    leftHandleCurrentChange(val) {
      // 获取序列信息
      if (val) {
        this.leftCurrentRow = val
        this.getSeriesInfo(this.leftCurrentRow.id)
        this.queryData.patient_id = this.leftCurrentRow.patient_id
      // this.queryData.accession_number = this.leftCurrentRow.accession_number
      this.queryData.modalities_in_study = this.leftCurrentRow.modalities_in_study;
      this.queryData.time_type = "7"
      if(!this.showTime1){
      this.queryData.time_type = '2'
    }
      if(this.leftCurrentRow.modalities_in_study.toLowerCase() == 'rtplan'){
        this.queryData.modalities_in_study = ''
        this.queryData.time_type = "2"
      }
      

      
      this.queryData.start_time = this.leftCurrentRow.study_date_time
      this.queryData.end_time = this.leftCurrentRow.study_date_time
      }
      
    },
    rightHandleCurrentChange(val) {
      if(val){
        this.rightCurrentRow = val
      }
    },
    queryFn() {
      this.rightTableData = []
      let { patient_name, patient_id, accession_number, modalities_in_study } = this.queryData

      if (!patient_name && !patient_id && !accession_number && !modalities_in_study) {
        this.$message({
          type: 'warning',
          message: '患者姓名、患者编号、检查编号、检查类型 不能同时为空！',
          // '请输入查询条件'
        })
        return
      }
      this.imgMatchListInfo()
    },
    resetFn() {
      this.queryData.patient_name = ''
      this.queryData.patient_id = ''
      this.queryData.accession_number = ''
      this.queryData.modalities_in_study = ''
      this.queryData.time_type = '7'
      this.un_match_study = '0'
      this.start_time = ''
      this.end_time = ''
    },
    async imgMatchListInfo() {
      // let paramsData = {
      //   patient_name:this.queryData.patient_name,
      //   patient_id:this.queryData.patient_id,
      //   accession_number:this.queryData.accession_number,
      //   modalities_in_study:this.queryData.modalities_in_study,
      //   un_match_study:this.queryData.un_match_study
      // };
      
       let paramsData = {...this.queryData}


      if(this.queryData.start_time){
        paramsData.start_time = this.queryData.start_time.split(' ').length>0?(this.queryData.start_time.split(' ')[0]+' 00:00:00'):''
      }

      if(this.queryData.end_time){
        paramsData.end_time = this.queryData.end_time.split(' ').length>0?(this.queryData.end_time.split(' ')[0]+" 23:59:59"):''
      }
      const params = {
        ...paramsData,
        report_type: sessionStorage.getItem('currentSystemClass') === 'ECGIS' ? 'ECG' : sessionStorage.getItem('currentSystemClass')
      }

      let res = await this.$pacsApi.pacsApi.imgMatchListInfo(params)
      let { code, data } = res
      if (code === 0) {
        this.emptyText = '未查询到记录';
        this.rightTableData = data
      }
    },
    MatchClose(val) {
      this.matchImageShow = false
      if(val === 'true'){
        this.isShouldRefresh = this.currentMatchState === 0 && this.singleMatch
        this.imgMatchFn()
  
      }
    },
    imgMatch() {
      if (!this.leftCurrentRow || !this.rightCurrentRow) {
        this.$message({
          type: 'warning',
          message: '请选择要匹配的项'
        })
        return
      }
      // console.log(this.leftCurrentRow, this.rightCurrentRow, '当前选中数据');
      this.currentMatchState = this.leftCurrentRow.match_state
      //确定要匹配吗？  文案待确认。。。。
      this.matchImageShow = true
    },
   imgMatchFn() {


      this.leftTableData.forEach((ele, index) => {
        if (ele.id === this.leftCurrentRow.id) {
          if (this.leftTableData.length === 1) {
            this.leftTableData = []
            // this.leftCurrentRow = null
          } else if (this.leftTableData.length - 1 === index) { // 当前选中行是arr最后一个,删除并选中第一行
            this.leftTableData.splice(index, 1)
            // this.leftCurrentRow = this.leftTableData[0]
            this.$nextTick(() => {
              if (this.leftTableData.length > 0) {
                this.$refs.leftTable.setCurrentRow(this.$refs.leftTable.data[0])
              }
            })
          } else {
            this.leftTableData.splice(index, 1)
            // this.leftCurrentRow = this.leftTableData[index]
            this.$nextTick(() => {
              if (this.leftTableData.length > 0) {
                this.$refs.leftTable.setCurrentRow(this.$refs.leftTable.data[0])
              }
            })
          }
        }
      })
      this.$refs.rightTable.setCurrentRow() // setTimeout(() => {})
      this.imgMatchListInfo()
      this.series_count = 0
      this.images_count = 0
      this.seriesData = []

    },
    async getViewerKey(id) {
      let res = await this.$pacsApi.pacsApi.getViewerKey(id)
      let { code, data } = res
      if (code === 0) {
        window.open(this.baseUrl + '/s/' + data)
      }
    },
    async getViewUrl(id) {
      var newArr = []
      newArr.push(id)
      let usee_world_view = (this.setObj && this.setObj.param_value) || false
      var data = {
        study_ids: newArr,
        usee_world_view: usee_world_view
      }
      this.$pacsApi.pacsApi.getViewUrl(data).then(res => {
        if (res.code === 0) {
          if (usee_world_view) {
            window.open(res.data)
          } else {
            window.open(configUrl.frontEndUrl + '/s/' + res.data)
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toImgViewerPage(id) {
      this.getViewUrl(id)
    },
    recalculateLeftTableHeight() { // 重新计算左边表格高度
      this.$nextTick(() => {
        var clientHeight = document.body.clientHeight // 屏幕高度
        // console.log(clientHeight)
        setTimeout(() => {
          this.leftTableHeight = clientHeight - 58 - 65 - 55
          // console.log(this.leftTableHeight)
        }, 0)
      })
    }
  },
  mounted() {
    this.setObj = JSON.parse(localStorage.getItem('setObj')) || JSON.parse(localStorage.getItem('setPacsObj')) || {}

    // console.log('影像匹配获取到的参数', this.$route);

    this.showTime1 = sessionStorage.getItem('currentSystemClass') != 'RTIS'
    if(!this.showTime1){
      this.queryData.time_type = '2'
    }
    console.log('数据不对哦？',this.showTime1,this.queryData.time_type);
    // if(this.$route.params['unmatchData'] && this.$route.params['unmatchData'].length > 0) {
    //   this.leftTableData = this.$route.params['unmatchData']
    // }else {
    //   this.leftTableData = []
    // }
    if (this.$route.query.beginData && this.$route.query.endData) {
      this.checkTimeStart = this.$route.query.beginData + ' 00:00:00'
      this.checkTimeEnd = this.$route.query.endData + ' 00:00:00'
    }
    this.institution_id = this.$route.query.institution_id || ''
    if (this.$route.query.institution_id) {
      store.commit('permission/SET_DEPTINSTITUTIONID', this.$route.query.institution_id)
    }
    let array = JSON.parse(this.$route.query.waitMatchData)
    if (array.length > 0) {
      //如果有传过来的数据就显示传过来的数据
      this.leftTableData = array
      this.$nextTick(() => { this.$refs.leftTable.setCurrentRow(this.$refs.leftTable.data[0]) })

    } else {
      this.getIMGList()

    }
    this.singleMatch = this.$route.query.singleMatch
    this.recalculateLeftTableHeight()
    this.basePath = process.env.NODE_ENV === 'development' ? '' : '/paservice'
    // window.onresize = () => {
    //   return () => {
    //     this.recalculateLeftTableHeight()
    //   }
    // }
  },
  components: {
    HeadTabSwitch,
    CommonTable,
    MatchImageVue
  }
}
</script>

<style lang="less" scoped>
// #app .closeBar .main .closeBarMain{
//   min-width: 1080px !important;
// }
/deep/.modeNavBar {
  .pl5 {
    font-size: 14px;
    color: #acacac;
  }
}

/deep/.el-form-item__label {
  padding-right: 5px;
}

/deep/ .el-input--suffix .el-input__inner {
  padding-right: 15px !important;
}

.el-form--inline .el-form-item {
  margin-right: 0;
}

.main_content {
  .img_floor {
    /*display: flex;*/
    width: 100%;
    height: 295px;
    border-bottom: 5px solid #F5F5F5;

    .floor_left {
      width: 275px;
      /*flex: 1;*/
      float: left;
      height: 100%;

      .left_top {
        height: 170px;
        padding: 10px;

        .patient_info {
          border: 1px dashed #999;
          height: 180px;
          padding: 10px 20px 0;
          box-sizing: border-box;
        }
      }

      .left_bottom {
        width: 100%;
        padding: 5px 10px;

        .count_boxs {
          padding-top: 10px;
          box-sizing: border-box;
          height: 90px;
          border: 1px dashed #999;

          .count_box {
            width: 50%;
            float: left;
            text-align: center;
            box-sizing: border-box;

            &:first-child {
              border-right: 1px solid #ddd;
            }
          }
        }
      }
    }

    .floor_right {
      /*flex: 3;*/
      width: calc(100% - 275px);
      float: left;
      height: 100%;
      padding-left: 30px;
      padding-right: 20px;
      box-sizing: border-box;
      overflow-y: auto;

      .img_info {
        display: flex;
        flex-wrap: nowrap;

        .num_box {
          margin-right: 44px;
        }

        .img_box {
          width: 100%;
          overflow-x: auto;
          display: flex;

          div {
            margin-right: 54px;
          }
        }
      }
    }
  }
}

.imgLoadFail {
  width: 94px;
  height: 90px;
  background: url("../../assets/images/pacs/imgLoadFail.png") no-repeat;
  background-size: 100% 100%;
}

.spiltBtnBox {
  button {
    // width: 80px;
    // height: 40px;
    padding: 0;
    background-color: white;
  }
}

.noImg {
  width: 58px;
  height: 90px;
  background: url("../../assets/images/pacs/noImg.png") no-repeat;
  background-size: 100% 100%;
}

.overthreeline {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.backButton {
  background-color: white;
}
/deep/ .searchUnMatch {
  .selectedTime{
    margin-left: 10px;
    margin-right: 5px;
  }
  .el-input__inner{
    height: 36px;
  }
//   .el-form--inline .el-form-item {
//   margin-right: 5px;
// }

}
/deep/ .el-table__body tr.current-row>td {
  // 色值待确定
  background-color: #0a70b0;
  color: white;
}
</style>
<style>
.el-table__empty-block .el-table__empty-text {
  height: 100% !important;
  margin-top: 0 !important;
}
</style>
